<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>淘宝首页</title>
    <meta name="viewport" content="width=device-width">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <style>
        * {margin:0; padding:0; list-style:none;}
        html { font-size: 10px; }
        header {
            width: 48rem;
            height: 5.5rem;
            background: #fe5400;
            overflow: hidden;
            position: relative;
            z-index: 99;
        }
        header h1 {
            width: 4.4rem;
            height: 3.7rem;
            background: url(img/logo.png) no-repeat;
            text-indent: -9999rem;
            background-size: 100% 100%;
            margin-left: 0.6rem;
            margin-top: 1rem;
        }
        .page_content{
            position: relative;
        }
        .banner {
            width: 48rem;
            height:21rem;
            position:relative;
            overflow: hidden;
            top: -5rem;
        }
        .banner ul{
            height:21rem;
            width: 999rem;
            overflow: hidden;
            transform:translateX(0rem);
        }
        .banner ul li {
            width: 48rem;
            height: 21rem;
            float: left;
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
        }
        .banner ul li img{
            width:100%;
            height:100%;
        }
        .banner ol {
            position: absolute;
            right: 0;
            bottom: 1.3rem;
        }
        .banner ol li {
            width: 1rem;
            height: 1rem;
            border: 1px solid #333;
            background: white;
            border-radius: 50%;
            margin: 0 0.4rem;
            opacity: 0.6;
            float: left;
        }
        .banner ol li.active {
            background: #ff5501;
            border: 1px solid #d0a793;
            opacity: 1;
        }
        .refresh {
            height: 5rem;
            font-size: 2.5rem;
            text-align: center;
            width: 48rem;
            line-height: 5rem;
        }
    </style>
</head>
<body>
    <header>
        <h1>淘宝网</h1>
    </header>
    <div class="refresh">
            下拉刷新
    </div>
    <div class="page_content">
        
        <section class="banner">
            <ul>
                <li><img src="./img/banner1.jpg" ></li>
                <li><img src="./img/banner2.jpg" ></li>
                <li><img src="./img/banner1.jpg" ></li>
                <li><img src="./img/banner2.jpg" ></li>
                <li><img src="./img/banner1.jpg" ></li>
                <li><img src="./img/banner2.jpg" ></li>
            </ul>
            <ol>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </section>
    </div>
</body>
<script>
    window.onresize=function (){
      document.documentElement.style.fontSize=document.documentElement.clientWidth/48+'px';
    };
    window.onresize();
    
    window.onload = function(){
        let page = document.getElementsByClassName('page_content')[0];
        let refresh = document.getElementsByClassName('refresh')[0];
        let banner = document.querySelector('.banner');
        let bannerUl = banner.children[0];
        let page_content = document.querySelector('.page_content');
        let ol = document.querySelectorAll('.banner ol li');

        let x = 0,y = 0;
        
        document.addEventListener('touchmove', (e) => {
          e.preventDefault();
          return false
        }, false)
        
        banner.addEventListener('touchstart', function (ev){
           
            let startX = ev.targetTouches[0].clientX;
            let startY = ev.targetTouches[0].clientY;
            
            let disX = startX - x;
            let disY = startY - y;
            let dir = '';
            let n = 0;
            function fnmove(ev) {
                //方向定位
                if(dir == ''){
                     if(Math.abs(ev.targetTouches[0].clientX - startX) > 5){
                         dir = 'x';
                     }else if(Math.abs(ev.targetTouches[0].clientY) > 5){
                         dir = 'y';
                     }
                }else{
                    if(dir == 'x'){
                        x = ev.targetTouches[0].clientX - disX;
                        //x : 鼠标移动位置 因为是负数，所以x前面加一个 “-”号  负负为正 得到的就是一个正数。
                        //bannerUl.children[0].offsetWidth 获取UL下第一个元素的宽度（其实所有元素宽度都一样），让 X 除以它 获取的就是当前鼠标拖动到了第几个元素
                        n = Math.round(-x/bannerUl.children[0].offsetWidth);
                        // n ：上面获取到的页面上显示到了第几个元素，那么接下来用 n 乘以 ul下元素的宽度，就的处理 当前元素的 最左边的一个值，
                        //然后吧这个数值 变为负数就是我们想要的X 的值了
                        x = -n * bannerUl.children[0].offsetWidth;
                        bannerUl.style.transition = '0.5s all ease';
                        bannerUl.style.transform = `translateX(${x}px)`;
                    }else{
                        y = ev.targetTouches[0].clientY - disY;
                        if( y > 100){
                            refresh.innerHTML = '松手刷新';
                        }else{
                            refresh.innerHTML = '下拉刷新';
                        }
                        y = y /3;
                        page.style.transition = '';
                        page.style.transform = `translateY(${y}px)`;
                    }
                }
                console.log(dir);
                ev.preventDefault();
            }
            function fnend(ev) {
                banner.removeEventListener('touchmove',fnmove,false);
                banner.removeEventListener('touchend',fnend,false);
                console.log(`end事件`);
                Array.from(ol).forEach((li,index)=>{
                    if(index == n){
                        li.className = 'active';
                    }else{
                        li.className = '';
                    }
                });
                if(y > 0){
                    y = 0;
                    refresh.innerHTML = '下拉刷新';
                    page.style.transition = '0.5s all ease';
                    page.style.transform = 'translateY(0px)';
                }
            }
            banner.addEventListener('touchmove',fnmove,false);
            banner.addEventListener('touchend',fnend,false);
        },false);
    }
</script>
</html>